<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li class="active"><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0Webpack和React小书">Webpack和React小书</a><ul><li><a href="#t1介绍">介绍</a><ul><li><a href="#t2React">React</a></li><li><a href="#t3Webpack">Webpack</a></li></ul></li><li><a href="#t4介绍 Webpack">介绍 Webpack</a><ul><li><a href="#t5Grunt">Grunt</a></li><li><a href="#t6Gulp">Gulp</a></li><li><a href="#t7Browserify">Browserify</a></li><li><a href="#t8Webpack">Webpack</a></li></ul></li><li><a href="#t9启动">启动</a><ul><li><a href="#t10安装 Webpack">安装 Webpack</a></li><li><a href="#t11目录结构">目录结构</a></li><li><a href="#t12设置 Webpack">设置 Webpack</a></li><li><a href="#t13运行应用">运行应用</a></li><li><a href="#t14设置 package.json scripts">设置 package.json scripts</a></li></ul></li><li><a href="#t15工作流">工作流</a><ul><li><a href="#t16设置 webpack-dev-server">设置 webpack-dev-server</a></li></ul></li><li><a href="#t17浏览器自动刷新">浏览器自动刷新</a><ul><li><a href="#t18默认环境">默认环境</a></li></ul></li><li><a href="#t19引入文件">引入文件</a><ul><li><a href="#t20模块">模块</a></li><li><a href="#t21我需要使用文件后缀么？">我需要使用文件后缀么？</a></li></ul></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 id="t0Webpack&#x548C;React&#x5C0F;&#x4E66;">Webpack&#x548C;React&#x5C0F;&#x4E66; <a href="#t0Webpack&#x548C;React&#x5C0F;&#x4E66;"> # </a></h1>
<h2 id="t1&#x4ECB;&#x7ECD;">&#x4ECB;&#x7ECD; <a href="#t1&#x4ECB;&#x7ECD;"> # </a></h2>
<p>&#x8FD9;&#x672C;&#x5C0F;&#x4E66;&#x7684;&#x76EE;&#x7684;&#x662F;&#x5F15;&#x5BFC;&#x4F60;&#x8FDB;&#x5165; React &#x548C; Webpack &#x7684;&#x4E16;&#x754C;&#x3002;&#x4ED6;&#x4EEC;&#x4E24;&#x4E2A;&#x90FD;&#x662F;&#x975E;&#x5E38;&#x6709;&#x7528;&#x7684;&#x6280;&#x672F;&#xFF0C;&#x5982;&#x679C;&#x540C;&#x65F6;&#x4F7F;&#x7528;&#x4ED6;&#x4EEC;&#xFF0C;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x4F1A;&#x66F4;&#x52A0;&#x6709;&#x8DA3;&#x3002;</p>
<p>&#x8FD9;&#x672C;&#x5C0F;&#x4E66;&#x4F1A;&#x63D0;&#x4F9B;&#x6240;&#x6709;&#x76F8;&#x5173;&#x7684;&#x6280;&#x80FD;&#x3002;&#x5982;&#x679C;&#x4F60;&#x53EA;&#x662F;&#x5BF9; React &#x611F;&#x5174;&#x8DA3;&#xFF0C;&#x90A3;&#x53EF;&#x4EE5;&#x8DF3;&#x8FC7; Webpack &#x76F8;&#x5173;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x53CD;&#x4E4B;&#x4EA6;&#x7136;&#x3002; &#x5982;&#x679C;&#x60F3;&#x5B66;&#x4E60;&#x66F4;&#x591A;&#x7684;&#x76F8;&#x5173;&#x77E5;&#x8BC6;&#x53EF;&#x4EE5;&#x79FB;&#x6B65; SurviveJS - Webpack and React&#x3002;</p>
<h3 id="t2React">React <a href="#t2React"> # </a></h3>
<p>React &#x662F;&#x4E00;&#x4E2A;&#x80FD;&#x591F;&#x8BA9;&#x5F00;&#x53D1;&#x6A21;&#x5757;&#x53D8;&#x6210;&#x7B80;&#x5355;&#x7684;&#x5E93;&#x3002;&#x4E00;&#x65E6;&#x4F60;&#x7406;&#x89E3;&#x4ED6;&#x7684;&#x5DE5;&#x4F5C;&#x539F;&#x7406;&#xFF0C;&#x90A3;&#x4F60;&#x5C31;&#x53EF;&#x4EE5;&#x7528;&#x5B83;&#x642D;&#x5EFA;&#x81EA;&#x5DF1;&#x7684;&#x7A0B;&#x5E8F;&#xFF0C;&#x8FD9;&#x662F;&#x4E0D;&#x540C;&#x7C7B;&#x4F3C; Angular &#x90A3;&#x79CD;&#x8BD5;&#x7740;&#x5305;&#x63FD;&#x4E00;&#x5207;&#x7684;&#x6846;&#x67B6;&#x4E0D;&#x540C;&#x7684;&#x5730;&#x65B9;&#x3002;</p>
<p>&#x5982;&#x679C;&#x4F60;&#x60F3;&#x5F88;&#x5FEB;&#x8FC7;&#x4E00;&#x904D; React &#x7684;&#x77E5;&#x8BC6;&#x70B9;&#xFF0C;&#x90A3;&#x4E48; React &#x5B98;&#x65B9;&#x6559;&#x7A0B; &#x662F;&#x4E00;&#x4E2A;&#x5F88;&#x597D;&#x7684;&#x5F00;&#x59CB;&#x3002;</p>
<p>&#x53EF;&#x80FD; React &#x6700;&#x6709;&#x8DA3;&#x7684;&#x4E8B;&#x662F;&#x5B83;&#x4E00;&#x76F4;&#x4F1A;&#x5C1D;&#x8BD5;&#x8C03;&#x6574;&#x4F20;&#x7EDF;&#x7684; web &#x7EC4;&#x4EF6;&#x7684;&#x601D;&#x8DEF;&#x3002;&#x5B83;&#x8BA9;&#x6211;&#x4EEC;&#x91CD;&#x65B0;&#x601D;&#x8003;&#x5173;&#x6CE8;&#x70B9;&#x7684;&#x5206;&#x79BB;&#x3002;&#x5B83;&#xFF08;React Native&#xFF09;&#x4E5F;&#x4F1A;&#x5F71;&#x54CD; App &#x5F00;&#x53D1;&#x3002; React Native &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x4F7F;&#x7528; Javascript &#x5F00;&#x53D1;&#x539F;&#x751F;&#x5E94;&#x7528;&#x540C;&#x65F6;&#x4FDD;&#x8BC1;&#x4E86;&#x539F;&#x751F;&#x6027;&#x80FD;&#x3002;</p>
<h3 id="t3Webpack">Webpack <a href="#t3Webpack"> # </a></h3>
<p>Webpack &#x975E;&#x5E38;&#x5BB9;&#x6613;&#x64CD;&#x4F5C;&#xFF0C;&#x5B83;&#x662F;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x5408;&#x5E76;&#x7684;&#x5DE5;&#x5177;&#xFF0C;&#x672C;&#x8D28;&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x80FD;&#x591F;&#x628A;&#x5404;&#x79CD;&#x7EC4;&#x4EF6;&#xFF08;HTML&#xFF0C;CSS&#xFF0C;JS&#xFF09;&#x6784;&#x5EFA;&#x6210;&#x9879;&#x76EE;&#x3002;&#x6700;&#x65B9;&#x4FBF;&#x7684;&#x662F;&#x4F60;&#x53EA;&#x9700;&#x8981;&#x521D;&#x59CB;&#x5316;&#x914D;&#x7F6E;&#x4E00;&#x6B21;&#xFF0C;Webpack &#x4F1A;&#x66FF;&#x4F60;&#x505A;&#x90A3;&#x4E9B;&#x7E41;&#x7410;&#x7684;&#x4E8B;&#x60C5;&#xFF0C;&#x540C;&#x65F6;&#x4E5F;&#x4FDD;&#x8BC1;&#x4E86;&#x8BA9;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x6DF7;&#x5408;&#x4F7F;&#x7528;&#x5404;&#x79CD;&#x6280;&#x672F;&#x800C;&#x4E0D;&#x5934;&#x75BC;&#x3002;</p>
<p>&#x5982;&#x679C;&#x4F60;&#x5728; Webpack &#x65B9;&#x9762;&#x5B8C;&#x5168;&#x662F;&#x65B0;&#x624B;&#x7684;&#xFF0C;&#x4F46;&#x60F3;&#x5F00;&#x59CB;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x6559;&#x7A0B;&#x7684;&#x8BDD;&#xFF0C;&#x53EF;&#x4EE5;&#x53BB; Pete Hunt&apos;s guide&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x90A3;&#x91CC;&#x5B66;&#x4E60;&#x5230;&#x4E00;&#x4E9B;&#x57FA;&#x7840;&#x7684;&#x4F7F;&#x7528;&#xFF0C;&#x8FD9;&#x91CC;&#x53EA;&#x662F;&#x90A3;&#x8FB9;&#x7684;&#x4E00;&#x4E2A;&#x8865;&#x5145;&#x3002;</p>
<h2 id="t4&#x4ECB;&#x7ECD; Webpack">&#x4ECB;&#x7ECD; Webpack <a href="#t4&#x4ECB;&#x7ECD; Webpack"> # </a></h2>
<p>&#x5728; Web &#x5F00;&#x53D1;&#x5386;&#x7A0B;&#x4E0A;&#xFF0C;&#x6211;&#x4EEC;&#x6784;&#x5EFA;&#x4E86;&#x5F88;&#x591A;&#x5C0F;&#x578B;&#x7684;&#x6280;&#x672F;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x6BD4;&#x5982;&#x7528; HTML &#x53BB;&#x63CF;&#x8FF0;&#x9875;&#x9762;&#x7ED3;&#x6784;&#xFF0C;CSS &#x53BB;&#x63CF;&#x8FF0;&#x9875;&#x9762;&#x6837;&#x5F0F;&#xFF0C;Javascript &#x53BB;&#x63CF;&#x8FF0;&#x9875;&#x9762;&#x903B;&#x8F91;&#xFF0C;&#x6216;&#x8005;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x7528;&#x4E00;&#x4E9B;&#x6BD4;&#x5982; Jade &#x53BB;&#x53D6;&#x4EE3; HTML&#xFF0C;&#x7528; Sass &#x6216; Less &#x53BB;&#x53D6;&#x4EE3;CSS&#xFF0C;&#x7528; CoffeeScript &#x6216;&#x8005; TypeScript &#x4E4B;&#x7C7B;&#x7684;&#x53BB;&#x53D6;&#x4EE3; Javascript&#xFF0C;&#x4E0D;&#x8FC7;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#x53EF;&#x80FD;&#x662F;&#x4E00;&#x4EF6;&#x6BD4;&#x8F83;&#x70E6;&#x607C;&#x7684;&#x4E8B;&#x60C5;&#x3002;&#xFF08;&#x9700;&#x8981;&#x5B89;&#x88C5;&#x989D;&#x5916;&#x5F88;&#x591A;&#x7684;&#x5E93;&#xFF09;</p>
<p>&#x8FD9;&#x91CC;&#x6709;&#x5F88;&#x591A;&#x4E3A;&#x4EC0;&#x4E48;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5C1D;&#x8BD5;&#x90A3;&#x4E9B;&#x65B0;&#x6280;&#x672F;&#x7684;&#x7406;&#x7531;&#x3002;&#x4E0D;&#x7BA1;&#x6211;&#x4EEC;&#x7528;&#x4EC0;&#x4E48;&#xFF0C;&#x603B;&#x4E4B;&#xFF0C;&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x5E0C;&#x671B;&#x4F7F;&#x7528;&#x90A3;&#x4E9B;&#x80FD;&#x591F;&#x5904;&#x7406;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x7684;&#x65B9;&#x6848;&#xFF0C;&#x6240;&#x4EE5;&#x51FA;&#x6765;&#x4E86;&#x7F16;&#x8BD1;&#x65B9;&#x6848;&#x3002;&#x5386;&#x53F2;&#x4E0A;&#x5DF2;&#x7ECF;&#x6709;&#x5F88;&#x591A;&#x5206;&#x4EAB;&#x4E86;&#xFF0C;&#x6BD4;&#x5982; Make &#x53EF;&#x80FD;&#x662F;&#x5F88;&#x591A;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x4E2D;&#x6700;&#x77E5;&#x540D;&#x4E14;&#x662F;&#x53EF;&#x884C;&#x7684;&#x65B9;&#x6848;&#x3002;Grunt &#x548C; Gulp &#x662F;&#x5728;&#x662F;&#x524D;&#x7AEF;&#x7684;&#x4E16;&#x754C;&#x4E2D;&#x6700;&#x6D41;&#x884C;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x4ED6;&#x4EEC;&#x4E24;&#x4E2A;&#x90FD;&#x6709;&#x5F88;&#x591A;&#x975E;&#x5E38;&#x6709;&#x7528;&#x7684;&#x63D2;&#x4EF6;&#x3002;NPM&#xFF08;Node.js &#x7684;&#x5305;&#x7BA1;&#x7406;&#x5668;&#xFF09;&#x5219;&#x5305;&#x542B;&#x4E86;&#x4ED6;&#x4EEC;&#x4E24;&#x4E2A;&#x3002;</p>
<h3 id="t5Grunt">Grunt <a href="#t5Grunt"> # </a></h3>
<p>Grunt &#x662F;&#x76F8;&#x6BD4;&#x540E;&#x9762;&#x51E0;&#x4E2A;&#x66F4;&#x65E9;&#x7684;&#x9879;&#x76EE;&#xFF0C;&#x4ED6;&#x4F9D;&#x8D56;&#x4E8E;&#x5404;&#x79CD;&#x63D2;&#x4EF6;&#x7684;&#x914D;&#x7F6E;&#x3002;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x5F88;&#x597D;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x4F46;&#x662F;&#x8BF7;&#x76F8;&#x4FE1;&#x6211;&#xFF0C;&#x4F60;&#x4E0D;&#x4F1A;&#x60F3;&#x770B;&#x5230;&#x4E00;&#x4E2A; 300 &#x884C;&#x7684; Gruntfile&#x3002;&#x5982;&#x679C;&#x4F60;&#x597D;&#x5947; Grunt &#x7684;&#x914D;&#x7F6E;&#x4F1A;&#x5982;&#x4F55;&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x91CC;&#x662F;&#x6709;&#x4E2A;&#x4ECE; Grunt &#x6587;&#x6863; &#x7684;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code>module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: [&apos;Gruntfile.js&apos;, &apos;src/**/*.js&apos;, &apos;test/**/*.js&apos;],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: [&apos;&lt;%= jshint.files %&gt;&apos;],
      tasks: [&apos;jshint&apos;]
    }
  });

  grunt.loadNpmTasks(&apos;grunt-contrib-jshint&apos;);
  grunt.loadNpmTasks(&apos;grunt-contrib-watch&apos;);

  grunt.registerTask(&apos;default&apos;, [&apos;jshint&apos;]);

};
</code></pre><h3 id="t6Gulp">Gulp <a href="#t6Gulp"> # </a></h3>
<p>Gulp &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x4E0D;&#x4E00;&#x6837;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x4F9D;&#x8D56;&#x4E8E;&#x5404;&#x79CD;&#x63D2;&#x4EF6;&#x7684;&#x914D;&#x7F6E;&#x3002;Gulp &#x4F7F;&#x7528;&#x4E86;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x6D41;&#x7684;&#x6982;&#x5FF5;&#x3002;&#x5982;&#x679C;&#x4F60;&#x719F;&#x6089; Unix&#xFF0C;&#x90A3;&#x4E48; Gulp &#x5BF9;&#x4F60;&#x6765;&#x8BF4;&#x4F1A;&#x5DEE;&#x4E0D;&#x591A;&#xFF0C;Gulp &#x4F1A;&#x63D0;&#x4F9B;&#x4F60;&#x4E00;&#x4E9B;&#x7B80;&#x5355;&#x5316;&#x7684;&#x64CD;&#x4F5C;&#x3002;&#x5728;&#x8FD9;&#x4E2A;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x4E2D;&#xFF0C;&#x662F;&#x53BB;&#x5339;&#x914D;&#x4E00;&#x4E9B;&#x6587;&#x4EF6;&#x7136;&#x540E;&#x64CD;&#x4F5C;&#xFF08;&#x5C31;&#x662F;&#x8BF4;&#x548C; JavaScript &#x76F8;&#x53CD;&#xFF09;&#x7136;&#x540E;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#xFF08;&#x6BD4;&#x5982;&#x8F93;&#x51FA;&#x5728;&#x4F60;&#x8BBE;&#x7F6E;&#x7684;&#x7F16;&#x8BD1;&#x8DEF;&#x5F84;&#x7B49;&#xFF09;&#x3002;&#x8FD9;&#x91CC;&#x6709;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684; Gulpfile &#x7684;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code>var gulp = require(&apos;gulp&apos;);
var coffee = require(&apos;gulp-coffee&apos;);
var concat = require(&apos;gulp-concat&apos;);
var uglify = require(&apos;gulp-uglify&apos;);
var sourcemaps = require(&apos;gulp-sourcemaps&apos;);
var del = require(&apos;del&apos;);

var paths = {
  scripts: [&apos;client/js/**/*.coffee&apos;, &apos;!client/external/**/*.coffee&apos;],
};

// &#x4E0D;&#x662F;&#x6240;&#x6709;&#x7684;&#x4EFB;&#x52A1;&#x9700;&#x8981;&#x4F7F;&#x7528; streams
// &#x4E00;&#x4E2A; gulpfile &#x53EA;&#x662F;&#x53E6;&#x4E00;&#x4E2A;node&#x7684;&#x7A0B;&#x5E8F;&#xFF0C;&#x6240;&#x4EE5;&#x4F60;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6240;&#x6709; npm &#x7684;&#x5305;
gulp.task(&apos;clean&apos;, function(cb) {
  // &#x4F60;&#x53EF;&#x4EE5;&#x7528; `gulp.src` &#x6765;&#x4F7F;&#x7528;&#x591A;&#x91CD;&#x901A;&#x914D;&#x7B26;&#x6A21;&#x5F0F;
  del([&apos;build&apos;], cb);
});

gulp.task(&apos;scripts&apos;, [&apos;clean&apos;], function() {
  // &#x538B;&#x7F29;&#x548C;&#x590D;&#x5236;&#x6240;&#x6709; JavaScript &#xFF08;&#x9664;&#x4E86;&#x7B2C;&#x4E09;&#x65B9;&#x5E93;&#xFF09;
  // &#x52A0;&#x4E0A; sourcemaps
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat(&apos;all.min.js&apos;))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(&apos;build/js&apos;));
});

// &#x76D1;&#x542C;&#x6587;&#x4EF6;&#x4FEE;&#x6539;
gulp.task(&apos;watch&apos;, function() {
  gulp.watch(paths.scripts, [&apos;scripts&apos;]);
});

// &#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;&#xFF08;&#x5C31;&#x662F;&#x4F60;&#x5728;&#x547D;&#x4EE4;&#x884C;&#x8F93;&#x5165; `gulp` &#x65F6;&#x8FD0;&#x884C;&#xFF09;
gulp.task(&apos;default&apos;, [&apos;watch&apos;, &apos;scripts&apos;]);
</code></pre><p>&#x8FD9;&#x4E9B;&#x914D;&#x7F6E;&#x90FD;&#x662F;&#x4EE3;&#x7801;&#xFF0C;&#x6240;&#x4EE5;&#x5F53;&#x4F60;&#x9047;&#x5230;&#x95EE;&#x9898;&#x4E5F;&#x53EF;&#x4EE5;&#x4FEE;&#x6539;&#xFF0C;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x5DF2;&#x7ECF;&#x5B58;&#x5728;&#x7684; Gulp &#x63D2;&#x4EF6;&#xFF0C;&#x4F46;&#x662F;&#x4F60;&#x8FD8;&#x662F;&#x9700;&#x8981;&#x5199;&#x4E00;&#x5806;&#x6A21;&#x677F;&#x4EFB;&#x52A1;&#x3002;</p>
<h3 id="t7Browserify">Browserify <a href="#t7Browserify"> # </a></h3>
<p>&#x5904;&#x7406; Javascript &#x6A21;&#x5757;&#x4E00;&#x76F4;&#x662F;&#x4E00;&#x4E2A;&#x5927;&#x95EE;&#x9898;&#xFF0C;&#x56E0;&#x4E3A;&#x8FD9;&#x4E2A;&#x8BED;&#x8A00;&#x5728; ES6 &#x4E4B;&#x524D;&#x6CA1;&#x6709;&#x8FD9;&#x65B9;&#x9762;&#x7684;&#x6982;&#x5FF5;&#x3002;&#x56E0;&#x6B64;&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x505C;&#x7559;&#x5728;90&#x5E74;&#x4EE3;&#xFF0C;&#x5404;&#x79CD;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x6BD4;&#x5982;&#x63D0;&#x51FA;&#x4E86; AMD&#x3002;&#x5728;&#x5B9E;&#x8DF5;&#x4E2D;&#x53EA;&#x4F7F;&#x7528; CommonJS &#xFF08; Node.js &#x6240;&#x91C7;&#x7528;&#x7684;&#x683C;&#x5F0F;&#xFF09;&#x4F1A;&#x6BD4;&#x8F83;&#x6709;&#x5E2E;&#x52A9;&#xFF0C;&#x800C;&#x8BA9;&#x5DE5;&#x5177;&#x53BB;&#x5904;&#x7406;&#x5269;&#x4E0B;&#x7684;&#x4E8B;&#x60C5;&#x3002;&#x5B83;&#x7684;&#x4F18;&#x52BF;&#x662F;&#x4F60;&#x53EF;&#x4EE5;&#x53D1;&#x5E03;&#x5230; NPM &#x4E0A;&#x6765;&#x907F;&#x514D;&#x91CD;&#x65B0;&#x53D1;&#x660E;&#x8F6E;&#x5B50;&#x3002;</p>
<p>Browserify &#x89E3;&#x51B3;&#x4E86;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;&#x5B83;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x53EF;&#x4EE5;&#x628A;&#x6A21;&#x5757;&#x96C6;&#x5408;&#x5230;&#x4E00;&#x8D77;&#x7684;&#x65B9;&#x5F0F;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x7528; Gulp &#x8C03;&#x7528;&#x5B83;&#xFF0C;&#x6B64;&#x5916;&#x6709;&#x5F88;&#x591A;&#x8F6C;&#x6362;&#x5C0F;&#x5DE5;&#x5177;&#x53EF;&#x4EE5;&#x8BA9;&#x4F60;&#x66F4;&#x517C;&#x5BB9;&#x7684;&#x4F7F;&#x7528;&#xFF08;&#x6BD4;&#x5982; watchify &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x76D1;&#x89C6;&#x5668;&#x5E2E;&#x52A9;&#x4F60;&#x5728;&#x5F00;&#x53D1;&#x8FC7;&#x7A0B;&#x4E2D;&#x66F4;&#x52A0;&#x81EA;&#x52A8;&#x5316;&#x5730;&#x628A;&#x6587;&#x4EF6;&#x5408;&#x5E76;&#x8D77;&#x6765;&#xFF09;&#xFF0C;&#x8FD9;&#x6837;&#x4F1A;&#x7701;&#x4E0B;&#x5F88;&#x591A;&#x7CBE;&#x529B;&#x3002;&#x6BCB;&#x5EB8;&#x7F6E;&#x7591;&#xFF0C;&#x4E00;&#x5B9A;&#x7A0B;&#x5EA6;&#x6765;&#x8BB2;&#xFF0C;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x5F88;&#x597D;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;</p>
<h3 id="t8Webpack">Webpack <a href="#t8Webpack"> # </a></h3>
<p>Webpack &#x6269;&#x5C55;&#x4E86; CommonJs &#x7684; require &#x7684;&#x60F3;&#x6CD5;&#xFF0C;&#x6BD4;&#x5982;&#x4F60;&#x60F3;&#x5728; CoffeeScript&#x3001;Sass&#x3001;Markdown &#x6216;&#x8005;&#x5176;&#x4ED6;&#x4EC0;&#x4E48;&#x4EE3;&#x7801;&#x4E2D; require &#x4F60;&#x60F3;&#x8981;&#x7684;&#x4EFB;&#x4F55;&#x4EE3;&#x7801;&#x7684;&#x8BDD;&#xFF1F;&#x90A3;&#x4E48; Webpack &#x6B63;&#x662F;&#x505A;&#x8FD9;&#x65B9;&#x9762;&#x7684;&#x5DE5;&#x4F5C;&#x3002;&#x5B83;&#x4F1A;&#x901A;&#x8FC7;&#x914D;&#x7F6E;&#x6765;&#x53D6;&#x51FA;&#x4EE3;&#x7801;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#xFF0C;&#x7136;&#x540E;&#x628A;&#x4ED6;&#x4EEC;&#x901A;&#x8FC7;&#x52A0;&#x8F7D;&#x5668;&#x628A;&#x4EE3;&#x7801;&#x517C;&#x5BB9;&#x5730;&#x8F93;&#x51FA;&#x5230;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x4E2D;&#x3002;&#x8FD9;&#x91CC;&#x662F;&#x4E00;&#x4E2A; Webpack &#x5B98;&#x7F51; &#x4E0A;&#x7684;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code>module.exports = {
    entry: &quot;./entry.js&quot;,
    output: {
        path: __dirname,
        filename: &quot;bundle.js&quot;
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: &quot;style!css&quot; }
        ]
    }
};
</code></pre><p>&#x5728;&#x63A5;&#x4E0B;&#x6765;&#x7684;&#x7AE0;&#x8282;&#x4E2D;&#x6211;&#x4EEC;&#x4F1A;&#x4F7F;&#x7528; Webpack &#x6765;&#x6784;&#x5EFA;&#x9879;&#x76EE;&#x6765;&#x5C55;&#x793A;&#x5B83;&#x7684;&#x80FD;&#x529B;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x7528;&#x5176;&#x4ED6;&#x5DE5;&#x5177;&#x548C; Webpack &#x4E00;&#x8D77;&#x4F7F;&#x7528;&#x3002;&#x5B83;&#x4E0D;&#x4F1A;&#x89E3;&#x51B3;&#x6240;&#x6709;&#x4E8B;&#x60C5;&#xFF0C;&#x53EA;&#x662F;&#x89E3;&#x51B3;&#x4E00;&#x4E2A;&#x6253;&#x5305;&#x7684;&#x96BE;&#x9898;&#xFF0C;&#x65E0;&#x8BBA;&#x5982;&#x4F55;&#xFF0C;&#x8FD9;&#x662F;&#x5728;&#x5F00;&#x53D1;&#x8FC7;&#x7A0B;&#x4E2D;&#x9700;&#x8981;&#x89E3;&#x51B3;&#x7684;&#x95EE;&#x9898;&#x3002;</p>
<h2 id="t9&#x542F;&#x52A8;">&#x542F;&#x52A8; <a href="#t9&#x542F;&#x52A8;"> # </a></h2>
<p>&#x5728;&#x5F00;&#x59CB;&#x4E4B;&#x524D;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x628A;&#x4F60;&#x7684; Node.js &#x548C; NPM &#x90FD;&#x66F4;&#x65B0;&#x5230;&#x6700;&#x65B0;&#x7684;&#x7248;&#x672C;&#x3002;&#x8BBF;&#x95EE; nodejs.org &#x67E5;&#x770B;&#x5B89;&#x88C5;&#x8BE6;&#x60C5;&#x3002;&#x6211;&#x4EEC;&#x5C06;&#x4F1A;&#x4F7F;&#x7528; NPM &#x5B89;&#x88C5;&#x4E00;&#x4E9B;&#x5DE5;&#x5177;&#x3002;
&#x5F00;&#x59CB;&#x4F7F;&#x7528; Webpack &#x975E;&#x5E38;&#x7B80;&#x5355;&#xFF0C;&#x6211;&#x4F1A;&#x5C55;&#x793A;&#x7ED9;&#x4F60;&#x770B;&#x4F7F;&#x7528;&#x5B83;&#x7684;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x9879;&#x76EE;&#x3002;&#x7B2C;&#x4E00;&#x6B65;&#xFF0C;&#x4E3A;&#x4F60;&#x7684;&#x9879;&#x76EE;&#x65B0;&#x5EFA;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x5939;&#xFF0C;&#x7136;&#x540E;&#x8F93;&#x5165; npm init&#xFF0C;&#x7136;&#x540E;&#x586B;&#x5199;&#x76F8;&#x5173;&#x95EE;&#x9898;&#x3002;&#x8FD9;&#x6837;&#x4F1A;&#x4E3A;&#x4F60;&#x521B;&#x5EFA;&#x4E86; package.json&#xFF0C;&#x4E0D;&#x7528;&#x62C5;&#x5FC3;&#x586B;&#x9519;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x4E4B;&#x540E;&#x4FEE;&#x6539;&#x5B83;&#x3002;</p>
<h3 id="t10&#x5B89;&#x88C5; Webpack">&#x5B89;&#x88C5; Webpack <a href="#t10&#x5B89;&#x88C5; Webpack"> # </a></h3>
<p>&#x63A5;&#x4E0B;&#x6765;&#x6211;&#x4EEC;&#x5B89;&#x88C5; Webpack&#xFF0C;&#x6211;&#x4EEC;&#x8981;&#x628A;&#x5B83;&#x5B89;&#x88C5;&#x5728;&#x672C;&#x5730;&#xFF0C;&#x7136;&#x540E;&#x628A;&#x5B83;&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x4F9D;&#x8D56;&#x4FDD;&#x5B58;&#x4E0B;&#x6765;&#x3002;&#x8FD9;&#x6837;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x4EFB;&#x4F55;&#x5730;&#x65B9;&#x7F16;&#x8BD1;&#xFF08;&#x670D;&#x52A1;&#x7AEF;&#x7F16;&#x8BD1;&#x4E4B;&#x7C7B;&#x7684;&#xFF09;&#x3002;&#x8F93;&#x5165; npm i wepack --save-dev&#x3002;&#x5982;&#x679C;&#x4F60;&#x60F3;&#x8FD0;&#x884C;&#x5B83;&#xFF0C;&#x5C31;&#x8F93;&#x5165; node_modules/.bin/webpack&#x3002;</p>
<h3 id="t11&#x76EE;&#x5F55;&#x7ED3;&#x6784;">&#x76EE;&#x5F55;&#x7ED3;&#x6784; <a href="#t11&#x76EE;&#x5F55;&#x7ED3;&#x6784;"> # </a></h3>
<p>&#x9879;&#x76EE;&#x7684;&#x76EE;&#x5F55;&#x7ED3;&#x6784;&#x957F;&#x8FD9;&#x6837;&#xFF1A;</p>
<pre><code>/app

main.js
component.js
/build

bundle.js (&#x81EA;&#x52A8;&#x521B;&#x5EFA;)
index.html
package.json
webpack.config.js
</code></pre><p>&#x6211;&#x4EEC;&#x4F1A;&#x4F7F;&#x7528; Webpack &#x5728;&#x6211;&#x4EEC;&#x7684; /app &#x91CC;&#x6765;&#x81EA;&#x52A8;&#x521B;&#x5EFA; bundle.js &#x3002;&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x6211;&#x4EEC;&#x6765;&#x8BBE;&#x7F6E;</p>
<p>webpack.config.js&#x3002;</p>
<h3 id="t12&#x8BBE;&#x7F6E; Webpack">&#x8BBE;&#x7F6E; Webpack <a href="#t12&#x8BBE;&#x7F6E; Webpack"> # </a></h3>
<p>Webpack &#x7684;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x957F;&#x8FD9;&#x6837;&#xFF1A;</p>
<p>webpack.config.js</p>
<p>var path = require(&apos;path&apos;);</p>
<p>module.exports = {
    entry: path.resolve(<strong>dirname, &apos;app/main.js&apos;),
    output: {
        path: path.resolve(</strong>dirname, &apos;build&apos;),
        filename: &apos;bundle.js&apos;,
    },
};
&#x8FD0;&#x884C;&#x4F60;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x7F16;&#x8BD1;</p>
<p>&#x73B0;&#x5728;&#x6211;&#x4EEC;&#x6709;&#x4E86;&#x4E00;&#x4E2A;&#x6700;&#x7B80;&#x5355;&#x7684;&#x914D;&#x7F6E;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x6709;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;&#x53BB;&#x7F16;&#x8BD1;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x5F00;&#x59CB;&#x4E00;&#x4E2A;&#x7ECF;&#x5178;&#x7684; Hello World&#xFF0C;&#x8BBE;&#x7F6E; /app &#x50CF;&#x8FD9;&#x6837;&#xFF1A;</p>
<p>app/component.js</p>
<pre><code>&apos;use strict&apos;;


module.exports = function () {
    var element = document.createElement(&apos;h1&apos;);

    element.innerHTML = &apos;Hello world&apos;;

    return element;
};
</code></pre><p>app/main.js</p>
<pre><code>&apos;use strict&apos;;
var component = require(&apos;./component.js&apos;);


document.body.appendChild(component());
</code></pre><p>&#x73B0;&#x5728;&#x5728;&#x4F60;&#x7684;&#x547D;&#x4EE4;&#x884C;&#x8FD0;&#x884C; webpack&#xFF0C;&#x7136;&#x540E;&#x4F60;&#x7684;&#x5E94;&#x7528;&#x4F1A;&#x5F00;&#x59CB;&#x7F16;&#x8BD1;&#xFF0C;&#x4E00;&#x4E2A; bundle.js &#x6587;&#x4EF6;&#x5C31;&#x8FD9;&#x6837;&#x51FA;&#x73B0;&#x5728;&#x4F60;&#x7684; /build &#x6587;&#x4EF6;&#x5939;&#x4E0B;&#xFF0C;&#x9700;&#x8981;&#x5728; build/ &#x4E0B;&#x7684; index.html &#x53BB;&#x542F;&#x52A8;&#x9879;&#x76EE;&#x3002;</p>
<p>build/index.html</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre><p>&#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x53EF;&#x4EE5;&#x7528; html-webpack-plugin &#x6765;&#x751F;&#x6210;&#x3002;&#x5982;&#x679C;&#x4F60;&#x89C9;&#x5F97;&#x5192;&#x9669;&#xFF0C;&#x90A3;&#x5C31;&#x628A;&#x5269;&#x4E0B;&#x7684;&#x5DE5;&#x5177;&#x4EA4;&#x7ED9;&#x5B83;&#x6765;&#x505A;&#x3002;&#x4F7F;&#x7528;&#x5B83;&#x5C31;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x914D;&#x7F6E;&#x7684;&#x95EE;&#x9898;&#x3002;&#x4E00;&#x822C;&#x6765;&#x8BF4;&#x4F7F;&#x7528; Webpack &#x6765;&#x5DE5;&#x4F5C;&#x5C31;&#x662F;&#x8FD9;&#x4E48;&#x4E2A;&#x5957;&#x8DEF;&#x3002;</p>
<h3 id="t13&#x8FD0;&#x884C;&#x5E94;&#x7528;">&#x8FD0;&#x884C;&#x5E94;&#x7528; <a href="#t13&#x8FD0;&#x884C;&#x5E94;&#x7528;"> # </a></h3>
<p>&#x53EA;&#x8981;&#x53CC;&#x51FB; index.html &#x6216;&#x8005;&#x8BBE;&#x7F6E;&#x4E00;&#x4E2A; Web &#x670D;&#x52A1;&#x6307;&#x5411; build/ &#x6587;&#x4EF6;&#x5939;&#x3002;</p>
<h3 id="t14&#x8BBE;&#x7F6E; package.json scripts">&#x8BBE;&#x7F6E; package.json scripts <a href="#t14&#x8BBE;&#x7F6E; package.json scripts"> # </a></h3>
<p>npm &#x662F;&#x4E00;&#x4E2A;&#x975E;&#x5E38;&#x597D;&#x7528;&#x7684;&#x7528;&#x6765;&#x7F16;&#x8BD1;&#x7684;&#x6307;&#x4EE4;&#xFF0C;&#x901A;&#x8FC7; npm &#x4F60;&#x53EF;&#x4EE5;&#x4E0D;&#x7528;&#x53BB;&#x62C5;&#x5FC3;&#x9879;&#x76EE;&#x4E2D;&#x4F7F;&#x7528;&#x4E86;&#x4EC0;&#x4E48;&#x6280;&#x672F;&#xFF0C;&#x4F60;&#x53EA;&#x8981;&#x8C03;&#x7528;&#x8FD9;&#x4E2A;&#x6307;&#x4EE4;&#x5C31;&#x53EF;&#x4EE5;&#x4E86;&#xFF0C;&#x53EA;&#x8981;&#x4F60;&#x5728; package.json &#x4E2D;&#x8BBE;&#x7F6E; scripts &#x7684;&#x503C;&#x5C31;&#x53EF;&#x4EE5;&#x4E86;&#x3002;</p>
<p>&#x5728;&#x8FD9;&#x4E2A;&#x6848;&#x4F8B;&#x4E2D;&#x6211;&#x4EEC;&#x628A;&#x7F16;&#x8BD1;&#x6B65;&#x9AA4;&#x653E;&#x5230; npm run build &#x4E2D;&#x662F;&#x8FD9;&#x6837;&#xFF1A;</p>
<p>npm i webpack --save - &#x5982;&#x679C;&#x4F60;&#x60F3;&#x8981;&#x628A; Webpack &#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; --save-dev&#xFF0C;&#x8FD9;&#x6837;&#x5C31;&#x975E;&#x5E38;&#x65B9;&#x4FBF;&#x5730;&#x8BA9;&#x4F60;&#x5728;&#x5F00;&#x53D1;&#x4E00;&#x4E2A;&#x5E93;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4E0D;&#x4F1A;&#x4F9D;&#x8D56;&#x5DE5;&#x5177;&#xFF08;&#x4F46;&#x4E0D;&#x662F;&#x4E2A;&#x597D;&#x65B9;&#x6CD5;&#xFF01;&#xFF09;&#x3002;
&#x628A;&#x4E0B;&#x9762;&#x7684;&#x5185;&#x5BB9;&#x6DFB;&#x52A0;&#x5230; package.json&#x4E2D;&#x3002;
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;webpack&quot;
  }
&#x73B0;&#x5728;&#x4F60;&#x53EF;&#x4EE5;&#x8F93;&#x5165; npm run build &#x5C31;&#x53EF;&#x4EE5;&#x7F16;&#x8BD1;&#x4E86;&#x3002;</p>
<p>&#x5F53;&#x9879;&#x76EE;&#x8D8A;&#x53D1;&#x590D;&#x6742;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8FD9;&#x6837;&#x7684;&#x65B9;&#x6CD5;&#x4F1A;&#x53D8;&#x5F97;&#x8D8A;&#x6765;&#x8D8A;&#x6709;&#x6548;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x628A;&#x6240;&#x6709;&#x590D;&#x6742;&#x7684;&#x64CD;&#x4F5C;&#x9690;&#x85CF;&#x5728; scripts &#x91CC;&#x9762;&#x6765;&#x4FDD;&#x8BC1;&#x754C;&#x9762;&#x7684;&#x7B80;&#x6D01;&#x3002;</p>
<p>&#x4E0D;&#x8FC7;&#x6F5C;&#x5728;&#x7684;&#x95EE;&#x9898;&#x662F;&#x8FD9;&#x79CD;&#x65B9;&#x6CD5;&#x4F1A;&#x5BFC;&#x81F4;&#x5982;&#x679C;&#x4F60;&#x4F7F;&#x7528;&#x4E00;&#x4E9B;&#x7279;&#x6B8A;&#x7684;&#x6307;&#x4EE4;&#x7684;&#x65F6;&#x5019;&#x53EA;&#x80FD;&#x5728; Unix &#x73AF;&#x5883;&#x4E2D;&#x4F7F;&#x7528;&#x3002;&#x6240;&#x4EE5;&#x5982;&#x679C;&#x4F60;&#x9700;&#x8981;&#x8003;&#x8651;&#x4E00;&#x4E9B;&#x672A;&#x77E5;&#x7684;&#x73AF;&#x5883;&#x4E2D;&#x7684;&#x8BDD;&#xFF0C;&#x90A3;&#x4E48; gulp-webpack &#x4F1A;&#x662F;&#x4E00;&#x4E2A;&#x597D;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;</p>
<p>&#x6CE8;&#x610F; NPM &#x4F1A;&#x627E;&#x5230; Webpack&#xFF0C;npm run &#x4F1A;&#x628A;&#x4ED6;&#x4E34;&#x65F6;&#x52A0;&#x5230; PATH&#x6765;&#x8BA9;&#x6211;&#x4EEC;&#x8FD9;&#x4E2A;&#x795E;&#x5947;&#x7684;&#x547D;&#x4EE4;&#x5DE5;&#x4F5C;&#x3002;</p>
<h2 id="t15&#x5DE5;&#x4F5C;&#x6D41;">&#x5DE5;&#x4F5C;&#x6D41; <a href="#t15&#x5DE5;&#x4F5C;&#x6D41;"> # </a></h2>
<p>&#x5982;&#x679C;&#x9700;&#x8981;&#x4E00;&#x76F4;&#x8F93;&#x5165; npm run build &#x786E;&#x5B9E;&#x662F;&#x4E00;&#x4EF6;&#x975E;&#x5E38;&#x65E0;&#x804A;&#x7684;&#x4E8B;&#x60C5;&#xFF0C;&#x5E78;&#x8FD0;&#x7684;&#x662F;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x628A;&#x8BA9;&#x4ED6;&#x5B89;&#x9759;&#x7684;&#x8FD0;&#x884C;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x8BBE;&#x7F6E; webpack-dev-server&#x3002;</p>
<h3 id="t16&#x8BBE;&#x7F6E; webpack-dev-server">&#x8BBE;&#x7F6E; webpack-dev-server <a href="#t16&#x8BBE;&#x7F6E; webpack-dev-server"> # </a></h3>
<p>&#x7B2C;&#x4E00;&#x6B65;&#xFF0C;&#x8F93;&#x5165; npm i webpack-dev-server --save&#xFF0C;&#x6B64;&#x5916;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x53BB;&#x8C03;&#x6574; package.json scripts &#x90E8;&#x5206;&#x53BB;&#x5305;&#x542B;&#x8FD9;&#x4E2A;&#x6307;&#x4EE4;&#xFF0C;&#x4E0B;&#x9762;&#x662F;&#x57FA;&#x672C;&#x7684;&#x8BBE;&#x7F6E;&#xFF1A;</p>
<p>package.json</p>
<pre><code>{
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;webpack&quot;,
    &quot;dev&quot;: &quot;webpack-dev-server --devtool eval --progress --colors --hot --content-base build&quot;
  }
}
</code></pre><p>&#x5F53;&#x4F60;&#x5728;&#x547D;&#x4EE4;&#x884C;&#x91CC;&#x8FD0;&#x884C; npm run dev &#x7684;&#x65F6;&#x5019;&#x4ED6;&#x4F1A;&#x6267;&#x884C; dev &#x5C5E;&#x6027;&#x91CC;&#x7684;&#x503C;&#x3002;&#x8FD9;&#x662F;&#x8FD9;&#x4E9B;&#x6307;&#x4EE4;&#x7684;&#x610F;&#x601D;&#xFF1A;</p>
<p>webpack-dev-server - &#x5728; localhost:8080 &#x5EFA;&#x7ACB;&#x4E00;&#x4E2A; Web &#x670D;&#x52A1;&#x5668;
--devtool eval - &#x4E3A;&#x4F60;&#x7684;&#x4EE3;&#x7801;&#x521B;&#x5EFA;&#x6E90;&#x5730;&#x5740;&#x3002;&#x5F53;&#x6709;&#x4EFB;&#x4F55;&#x62A5;&#x9519;&#x7684;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x8BA9;&#x4F60;&#x66F4;&#x52A0;&#x7CBE;&#x786E;&#x5730;&#x5B9A;&#x4F4D;&#x5230;&#x6587;&#x4EF6;&#x548C;&#x884C;&#x53F7;
--progress - &#x663E;&#x793A;&#x5408;&#x5E76;&#x4EE3;&#x7801;&#x8FDB;&#x5EA6;
--colors - Yay&#xFF0C;&#x547D;&#x4EE4;&#x884C;&#x4E2D;&#x663E;&#x793A;&#x989C;&#x8272;&#xFF01;
--content-base build - &#x6307;&#x5411;&#x8BBE;&#x7F6E;&#x7684;&#x8F93;&#x51FA;&#x76EE;&#x5F55;
&#x603B;&#x7684;&#x6765;&#x8BF4;&#xFF0C;&#x5F53;&#x4F60;&#x8FD0;&#x884C; npm run dev &#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x542F;&#x52A8;&#x4E00;&#x4E2A; Web &#x670D;&#x52A1;&#x5668;&#xFF0C;&#x7136;&#x540E;&#x76D1;&#x542C;&#x6587;&#x4EF6;&#x4FEE;&#x6539;&#xFF0C;&#x7136;&#x540E;&#x81EA;&#x52A8;&#x91CD;&#x65B0;&#x5408;&#x5E76;&#x4F60;&#x7684;&#x4EE3;&#x7801;&#x3002;&#x771F;&#x7684;&#x975E;&#x5E38;&#x7B80;&#x6D01;&#xFF01;</p>
<p>&#x8BBF;&#x95EE; <a href="http://localhost:8080">http://localhost:8080</a> &#x4F60;&#x4F1A;&#x770B;&#x5230;&#x6548;&#x679C;&#x3002;</p>
<h2 id="t17&#x6D4F;&#x89C8;&#x5668;&#x81EA;&#x52A8;&#x5237;&#x65B0;">&#x6D4F;&#x89C8;&#x5668;&#x81EA;&#x52A8;&#x5237;&#x65B0; <a href="#t17&#x6D4F;&#x89C8;&#x5668;&#x81EA;&#x52A8;&#x5237;&#x65B0;"> # </a></h2>
<p>&#x5F53;&#x8FD0;&#x884C; webpack-dev-server &#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5B83;&#x4F1A;&#x76D1;&#x542C;&#x4F60;&#x7684;&#x6587;&#x4EF6;&#x4FEE;&#x6539;&#x3002;&#x5F53;&#x9879;&#x76EE;&#x91CD;&#x65B0;&#x5408;&#x5E76;&#x4E4B;&#x540E;&#xFF0C;&#x4F1A;&#x901A;&#x77E5;&#x6D4F;&#x89C8;&#x5668;&#x5237;&#x65B0;&#x3002;&#x4E3A;&#x4E86;&#x80FD;&#x591F;&#x89E6;&#x53D1;&#x8FD9;&#x6837;&#x7684;&#x884C;&#x4E3A;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x628A;&#x4F60;&#x7684; index.html &#x653E;&#x5230; build/ &#x6587;&#x4EF6;&#x5939;&#x4E0B;&#xFF0C;&#x7136;&#x540E;&#x505A;&#x8FD9;&#x6837;&#x7684;&#x4FEE;&#x6539;&#xFF1A;</p>
<p>build/index.html</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src=&quot;http://localhost:8080/webpack-dev-server.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre><p>&#x6211;&#x4EEC;&#x9700;&#x8981;&#x589E;&#x52A0;&#x4E00;&#x4E2A;&#x811A;&#x672C;&#x5F53;&#x53D1;&#x751F;&#x6539;&#x52A8;&#x7684;&#x65F6;&#x5019;&#x53BB;&#x81EA;&#x52A8;&#x5237;&#x65B0;&#x5E94;&#x7528;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x5728;&#x914D;&#x7F6E;&#x4E2D;&#x589E;&#x52A0;&#x4E00;&#x4E2A;&#x5165;&#x53E3;&#x70B9;&#x3002;</p>
<pre><code>var path = require(&apos;path&apos;);


module.exports = {
    entry: [&apos;webpack/hot/dev-server&apos;, path.resolve(__dirname, &apos;app/main.js&apos;)],
    output: {
        path: path.resolve(__dirname, &apos;build&apos;),
        filename: &apos;bundle.js&apos;,
    },
};
</code></pre><p>&#x5C31;&#x662F;&#x8FD9;&#x6837;&#xFF01;&#x73B0;&#x5728;&#x4F60;&#x7684;&#x5E94;&#x7528;&#x5C31;&#x53EF;&#x4EE5;&#x5728;&#x6587;&#x4EF6;&#x4FEE;&#x6539;&#x4E4B;&#x540E;&#x81EA;&#x52A8;&#x5237;&#x65B0;&#x4E86;&#x3002;</p>
<h3 id="t18&#x9ED8;&#x8BA4;&#x73AF;&#x5883;">&#x9ED8;&#x8BA4;&#x73AF;&#x5883; <a href="#t18&#x9ED8;&#x8BA4;&#x73AF;&#x5883;"> # </a></h3>
<p>&#x5728;&#x4E0A;&#x9762;&#x7684;&#x4F8B;&#x5B50;&#x4E2D;&#x6211;&#x4EEC;&#x521B;&#x5EFA;&#x4E86; index.html &#x6587;&#x4EF6;&#x6765;&#x83B7;&#x53D6;&#x66F4;&#x591A;&#x7684;&#x81EA;&#x7531;&#x548C;&#x63A7;&#x5236;&#x3002;&#x540C;&#x6837;&#x4E5F;&#x53EF;&#x4EE5;&#x4ECE; <a href="http://localhost:8080/webpack-dev-server/bundle">http://localhost:8080/webpack-dev-server/bundle</a> &#x8FD0;&#x884C;&#x5E94;&#x7528;&#x3002;&#x8FD9;&#x4F1A;&#x89E6;&#x53D1;&#x4E00;&#x4E2A;&#x9ED8;&#x8BA4;&#x7684;&#x4F60;&#x4E0D;&#x80FD;&#x63A7;&#x5236;&#x7684; index.html &#xFF0C;&#x5B83;&#x540C;&#x6837;&#x4F1A;&#x89E6;&#x53D1;&#x4E00;&#x4E2A;&#x5141;&#x8BB8;iFrame&#x4E2D;&#x663E;&#x793A;&#x91CD;&#x5408;&#x5E76;&#x7684;&#x8FC7;&#x7A0B;&#x3002;</p>
<h2 id="t19&#x5F15;&#x5165;&#x6587;&#x4EF6;">&#x5F15;&#x5165;&#x6587;&#x4EF6; <a href="#t19&#x5F15;&#x5165;&#x6587;&#x4EF6;"> # </a></h2>
<h3 id="t20&#x6A21;&#x5757;">&#x6A21;&#x5757; <a href="#t20&#x6A21;&#x5757;"> # </a></h3>
<p>Webpack &#x5141;&#x8BB8;&#x4F60;&#x4F7F;&#x7528;&#x4E0D;&#x540C;&#x7684;&#x6A21;&#x5757;&#x7C7B;&#x578B;&#xFF0C;&#x4F46;&#x662F; &#x201C;&#x5E95;&#x5C42;&#x201D;&#x5FC5;&#x987B;&#x4F7F;&#x7528;&#x540C;&#x4E00;&#x79CD;&#x5B9E;&#x73B0;&#x3002;&#x6240;&#x6709;&#x7684;&#x6A21;&#x5757;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5728;&#x76D2;&#x5916;&#x8FD0;&#x884C;&#x3002;</p>
<ul>
<li>ES6 &#x6A21;&#x5757;<pre><code>import MyModule from &apos;./MyModule.js&apos;;
</code></pre></li>
<li>CommonJS<pre><code>var MyModule = require(&apos;./MyModule.js&apos;);
</code></pre></li>
<li>AMD
```
define([&apos;./MyModule.js&apos;], function (MyModule) {</li>
</ul>
<p>});</p>
<pre><code>### &#x7406;&#x89E3;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;

&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x9700;&#x8981;&#x7528;&#x5B83;&#x7684;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;&#x6765;&#x52A0;&#x8F7D;&#xFF0C;&#x770B;&#x4E00;&#x4E0B;&#x4E0B;&#x9762;&#x7684;&#x8FD9;&#x4E2A;&#x7ED3;&#x6784;&#xFF1A;
</code></pre><p>/app</p>
<p>/modules
MyModule.js
main.js (entry point)
utils.js</p>
<pre><code>&#x6253;&#x5F00; main.js &#x7136;&#x540E;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x4E0B;&#x9762;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#x5F15;&#x5165; app/modules/MyModule.js

app/main.js
</code></pre><p>// ES6
import MyModule from &apos;./modules/MyModule.js&apos;;</p>
<p>// CommonJS
var MyModule = require(&apos;./modules/MyModule.js&apos;);</p>
<pre><code>
&#x6700;&#x5F00;&#x59CB;&#x7684; ./ &#x662F; &#x201C;&#x76F8;&#x5BF9;&#x5F53;&#x524D;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;&#x201D;

&#x8BA9;&#x6211;&#x4EEC;&#x6253;&#x5F00; MyModule.js &#x7136;&#x540E;&#x5F15;&#x5165; app/utils&#xFF1A;

app/modules/MyModule.js

&#x5168;&#x9009;&#x590D;&#x5236;&#x653E;&#x8FDB;&#x7B14;&#x8BB0;
</code></pre><p>// ES6 &#x76F8;&#x5BF9;&#x8DEF;&#x5F84;
import utils from &apos;./../utils.js&apos;;</p>
<p>// ES6 &#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;
import utils from &apos;/utils.js&apos;;</p>
<p>// CommonJS &#x76F8;&#x5BF9;&#x8DEF;&#x5F84;
var utils = require(&apos;./../utils.js&apos;);</p>
<p>// CommonJS &#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;
var utils = require(&apos;/utils.js&apos;);
```
&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;&#x662F;&#x76F8;&#x5BF9;&#x5F53;&#x524D;&#x76EE;&#x5F55;&#x3002;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#x662F;&#x76F8;&#x5BF9;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#xFF0C;&#x8FD9;&#x4E2A;&#x6848;&#x4F8B;&#x4E2D;&#x662F; main.js&#x3002;</p>
<h3 id="t21&#x6211;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x6587;&#x4EF6;&#x540E;&#x7F00;&#x4E48;&#xFF1F;">&#x6211;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x6587;&#x4EF6;&#x540E;&#x7F00;&#x4E48;&#xFF1F; <a href="#t21&#x6211;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x6587;&#x4EF6;&#x540E;&#x7F00;&#x4E48;&#xFF1F;"> # </a></h3>
<p>&#x4E0D;&#xFF0C;&#x4F60;&#x4E0D;&#x9700;&#x8981;&#x53BB;&#x7279;&#x610F;&#x53BB;&#x4F7F;&#x7528; .js&#xFF0C;&#x4F46;&#x662F;&#x5982;&#x679C;&#x4F60;&#x5F15;&#x5165;&#x4E4B;&#x540E;&#x9AD8;&#x4EAE;&#x4F1A;&#x66F4;&#x597D;&#x3002;&#x4F60;&#x53EF;&#x80FD;&#x6709;&#x4E00;&#x4E9B; .js &#x6587;&#x4EF6;&#x548C;&#x4E00;&#x4E9B; .jsx &#x6587;&#x4EF6;&#xFF0C;&#x751A;&#x81F3;&#x4E00;&#x4E9B;&#x56FE;&#x7247;&#x548C; css &#x53EF;&#x4EE5;&#x7528; Webpack &#x5F15;&#x5165;&#xFF0C;&#x751A;&#x81F3;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5F15;&#x5165; node_modules &#x91CC;&#x7684;&#x4EE3;&#x7801;&#x548C;&#x7279;&#x6B8A;&#x6587;&#x4EF6;&#x3002;</p>
<p>&#x8BB0;&#x4F4F;&#xFF0C;Webpack &#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x5408;&#x5E76;&#xFF01;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x4F60;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x4ED6;&#x53BB;&#x52A0;&#x8F7D;&#x4EFB;&#x4F55;&#x4F60;&#x5199;&#x7684;&#x5339;&#x914D;&#xFF0C;&#x53EA;&#x8981;&#x6709;&#x4E00;&#x4E2A;&#x52A0;&#x8F7D;&#x5668;&#x3002;&#x6211;&#x4EEC;&#x7A0D;&#x540E;&#x4F1A;&#x7EE7;&#x7EED;&#x6DF1;&#x5165;&#x8FD9;&#x4E2A;&#x8BDD;&#x9898;&#x3002;</p>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
